<template>
<div class="model-home" v-loading.fullscreen.lock="detailLoading">
    <div class="box-top">
        <el-form @submit.native.prevent class="form-between" style="justify-content:flex-end">
            <el-form-item label="" style="margin-bottom: 8px !important">
                <el-input clearable @clear="search" placeholder="请输入模型名称" @keyup.enter.native="search" v-model="keyword">
                    <i slot="prefix" class="iconfont icon-sousuo" v-preventReClick="2000" @click="search"></i>
                </el-input>
            </el-form-item>
            <!-- <el-form-item>
                <el-button type="primary" v-preventReClick="2000" @click="search">查询</el-button>
                <el-button v-preventReClick="2000" @click="handleReset">重置</el-button>
            </el-form-item> -->
        </el-form>
    </div>
    <div class="box-table">
        <el-table height="100%" v-loading="loading" :data="tableData" tooltip-effect="dark">
            <template slot="empty">
                <no-data :types="isSearch">
                    <span>暂无数据</span>
                </no-data>
            </template>
            <el-table-column prop="modelName" label="模型名称" show-overflow-tooltip></el-table-column>
            <el-table-column label="标签" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag type="success" style="margin-right:5px;" v-for="item in scope.row.algorithmLabels.split('|')" :key="item">{{item}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createOper" label="创建人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" sortable label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="236px">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleDetail(scope.row.modelId)">查看</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handleEditModel(scope.row)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="exportPMML">导出PMML</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="box-pagenation" v-if="tableData.length > 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
    <model-detail v-if="detail.show" :detail="detail"></model-detail>
    <model-edit v-if="editForm.show" :editForm="editForm" @save="handleSaveEdit"></model-edit>
</div>
</template>

<script>
import {
    mapGetters,
    mapMutations
} from 'vuex'
import ModelDetail from '@/views/detail'
import ModelEdit from './Edit'
import NoData from '@/components/NoData'
export default {
    name: 'Projects',
    components: {
        ModelDetail,
        NoData,
        ModelEdit
    },
    data () {
        return {
            loading: false,
            detailLoading: false,
            keyword: '',
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            editForm: {
                title: '编辑模型',
                show: false,
                form: {
                    projectId: null,
                    modelId: null,
                    modelName: null,
                    description: null
                }
            },
            detail: {
                show: false
            },
            isSearch: false
        }
    },
    created () {
        this.init()
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    methods: {
        ...mapMutations({
            setModelDetail: 'common/setModelDetail',
            setUpdateModel: 'common/setUpdateModel'
        }),
        handleSaveEdit () {
            this.$post('/modelSource/updateModel', this.editForm.form).then(res => {
                if (res) {
                    this.editForm.show = false
                    this.$message.success('保存成功')
                    this.init()
                }
            })
        },
        exportPMML () {
            this.$message.warning('此功能正在开发中，敬请期待!')
        },
        handleEditModel (item) {
            this.editForm = {
                title: '编辑模型',
                show: true,
                form: {
                    projectId: this.projectId,
                    modelId: item.modelId,
                    modelName: item.modelName,
                    description: item.description
                }
            }
        },
        handleDetail (modelId) {
            this.detailLoading = true
            const params = {
                modelId,
                projectId: this.projectId
            }
            this.$post('/modelSource/viewModel', params).then(res => {
                if (res) {
                    this.setModelDetail(res)
                    this.detail.show = true
                }
            }).finally(() => {
                this.detailLoading = false
            })
        },
        handleReset () {
            this.keyword = ''
            this.isSearch = false
            this.currentPage = 1
            this.init()
        },
        search () {
            this.currentPage = 1
            this.isSearch = true
            this.init()
        },
        init () {
            this.loading = true
            const params = {
                projectId: this.projectId,
                keyword: this.keyword,
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('/modelSource/queryModels', params).then(res => {
                if (res) {
                    const {
                        total,
                        rows
                    } = res
                    this.total = total
                    this.tableData = rows
                }
            }).finally(() => {
                this.loading = false
            })
        },
        handleRemove (item) {
            this.$confirm(`确定要删除模型<span>[${item.modelName}]</span>吗？`, '提示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                const params = {
                    modelIds: [item.modelId],
                    projectId: this.projectId
                }
                this.$post('/modelSource/deleteModel', params).then(res => {
                    if (res) {
                        this.$message.success('删除成功')
                        this.init()
                        this.setUpdateModel(Math.random())
                    }
                })
            }).catch(() => {})
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        }
    }
}
</script>

<style lang="less">
.model-home {
    height: 100%;
    overflow: hidden;
    th {
        &.el-table-column--selection {
            .cell {
                opacity: 0;
            }
        }
    }
}
</style>
